import React,{useState,useEffect} from 'react'
import search from './search.module.css'
export default function Search(props) {
   const[keyword,setkeyword]=useState('')
   const fillList=(e)=>{
    setkeyword(e.target.value.trim())
    
   }
  
   useEffect(()=>{
   const timer=setTimeout(()=>{
 props.filterItem(keyword)
    },1000)
     return ()=>{
      clearTimeout(timer)
     }
 // eslint-disable-next-line
   },[keyword])
   
  return (
    <div className={search.box}>
    <div className={search.textbox}>
        <svg t="1680922839086" className={search.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2413" width="16" height="16"><path d="M704 627.2h-40.8l-14.4-14.4c50.4-58.4 80-133.6 80-216C728.8 212.8 580 64 396 64S64.8 213.6 64.8 396.8s148.8 332.8 332.8 332.8c82.4 0 158.4-30.4 216-80l14.4 14.4v40l256 255.2 76-76c-0.8 0-256-256-256-256z m-307.2 0c-127.2 0-230.4-103.2-230.4-230.4s103.2-230.4 230.4-230.4 230.4 103.2 230.4 230.4-103.2 230.4-230.4 230.4z" p-id="2414" fill="#8a8a8a"></path></svg>
        <input type='text' placeholder='请输入关键字' className={search.text} onChange={fillList}></input>
    </div>
    </div>
  )
}
